
<script setup lang="js">
// 1 路由对象
import {useRoute, useRouter} from 'vue-router';
let $route = useRoute()
let $router = useRouter()

//2 从会话级别取 url_path 一开始没有--》没有就是  /  根路径
let url_path = sessionStorage.url_path || '/'

//3 取出当前所在路径，放到 会话级别取 url_path
sessionStorage.url_path = $route.path;

// 4 点击跳转
const goPage = (path) => {  //
  // 已经是当前路由就没有必要重新跳转
  if (url_path !== path) {
    $router.push(path);
  }
  sessionStorage.url_path = path;
}


</script>

<template>
<div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <img src="../assets/img/vue.svg" alt=""  @click="goPage('/')" >

        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: Footer === '/free-course'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
        </li>
      </ul>

      <div class="right-part">
        <div>
          <span >登录</span>
          <span class="line">|</span>
          <span >注册</span>
        </div>
      </div>


    </div>
  </div>
</template>


<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>